<template>
	<div style="background-color: #333; height:40px; width: 100%;">
		
		<div v-if="this.username">
			<div style="float:right; margin-right: 20px; margin-top: 10px;">
				<el-dropdown>
					<span class="el-dropdown-link">
						<el-icon :size="18" style="float: left;margin-right: 7px;">
							<avatar />
						</el-icon>
						{{this.username}}
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="changeUserInfo">修改个人信息</el-dropdown-item>
						</el-dropdown-menu>
						<el-dropdown-menu>
							<el-dropdown-item @click="changePassword">修改密码</el-dropdown-item>
						</el-dropdown-menu>
						<el-dropdown-menu>
							<el-dropdown-item @click="SignOut">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
		<div v-else>
			<div style="float:right; margin: 10px;">
				<el-link @click="login" type="info">登录</el-link>
				<el-link @click="logon" style="margin-left: 20px;" type="info">注册</el-link>
			</div>
		</div>
			
	</div>
</template>

<script>
	const {ElMessage} = require("element-plus");
	export default {
		data(){
			return{
				userId: '',
				username: ''
			}
		},
		created() {
			this.userId = window.sessionStorage.getItem("userId");
			this.username = window.sessionStorage.getItem("username");
		},
		
		
		methods:{
			login(){
				this.$router.push("/login");
			},
			logon(){
				this.$router.push("/logon");
			},
			
			changePassword(){
				this.$router.push("/password")
			},
			
			changeUserInfo(){
				this.$router.push("/userinfo")
			},
			
			
			SignOut() {
				sessionStorage.clear()
				ElMessage({message: '用户退出登录',type: 'success',});
				this.$router.replace({
					path: '/main'
				});
				this.$router.go(0)
				
			},
			
			
		}
	}
</script>

<style>
</style>
